<template>
    <div style="height: 100%;width: 100%;position: relative;">
        <baidu-map
                style="height: 100%;width: 100%;"
                :center="center"
                :zoom="zoom"
                :scroll-wheel-zoom="true"
                @click="paintPolygon"
                @rightclick="stopPolygon"
                @mousemove="syncPolygon"
        >
            <!--绘制按钮-->
            <bm-control>
                <button @click="toggle">{{ polygon.editing ? '停止绘制' : '开始绘制' }}</button>
            </bm-control>
            <!--多边形-->
            <bm-polygon
                    :path="polygon.path"
                    stroke-color="blue"
                    fill-color="red"
                    :fill-opacity="0.8"
                    :stroke-opacity="0.5"
                    :stroke-weight="2"
                    :editing="true"
                    @lineupdate="updatePolygonPath"
                    @click="consolePath"
            />
        </baidu-map>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                map:null,
                center: {
                    lng: 117.233486,
                    lat: 31.826972,
                },
                zoom: 13,
                polygon: {
                    editing: false,
                    path: []
                }
            }
        },
        methods: {
            //【开启】|【关闭】绘制
            toggle() {
                this.polygon.editing = !this.polygon.editing;
                // 在这里做一步判断，如果有路径且开启绘制就把原来的路径清空
                if (this.polygon.path && this.polygon.editing) {
                    this.polygon.path = [];
                }
            },
            /*==========================多边形方法：start=================================*/
            //编辑多边形结束后，重置点
            updatePolygonPath(e) {
                //编辑覆盖物时触发，获取坐标点集合
                this.polygon.path = e.target.getPath();
                console.log("updatePolygonPath", JSON.stringify(this.polygon.path));
            },
            //打印path
            consolePath() {
                console.log("consolePath", JSON.stringify(this.polygon.path));
            },
            /*==========================多边形方法：end=================================*/
            /*==========================绘制方法：start=================================*/
            // 鼠标移动时(注：数组的最后一个用来存放鼠标移动的位置)
            syncPolygon(e) {
                //不开启绘制，不添加
                if (!this.polygon.editing) {
                    return;
                }
                const { path } = this.polygon;
                //没有第一个点，不添加
                if (path.length == 0) {
                    return;
                }
                //鼠标移动的过程中，在最后动态添加一个，方便展示
                if (path.length === 1) {
                    path.push(e.point);
                }
                //强制触发响应式更新 ,比【path[path.length - 1] = e.point;】这种方式更丝滑
                this.$set(path, path.length - 1, e.point);
                console.log("syncPolygon",JSON.stringify(this.polygon.path));
            },
            // 鼠标左键多边形绘制
            paintPolygon(e) {
                if (!this.polygon.editing) {
                    return
                }
                this.polygon.path.push({
                    lng: e.point.lng,
                    lat: e.point.lat
                });
                //如果不是第一个，需要替换到最后一个（展示的）
                console.log('paintPolygon', JSON.stringify(this.polygon.path));
            },
            // 鼠标右键点击时往路径里push一个面
            stopPolygon(e) {
                this.polygon.editing = false;
                this.polygon.path.pop();
                console.log('stopDraw', JSON.stringify(this.polygon.path));
            },
            /*==========================绘制方法：end=================================*/
        },
    }
</script>